<template>
  <div class="common-layout h100">
    <el-container>
      <el-aside width="200px">
        <!-- 八维票务logo图表 -->
        <img class="logoImg" src="../../img/票务LOGO.png" alt="">
        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
          <el-menu-item v-for="(item, index) in routes" :key="index" :index="(index + 1) + ''">
            <template #title>
              
              <img  class="icon" :src="item.icon" alt="">
              <span @click="Pushroute(item.path)">{{ item.title }}</span>
            </template>
          </el-menu-item>

        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{ dictionaries[item]
              }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- 获取用户头像用户信息 -->
          <div class="header_right">
            <div class="userInfo">当前登录 <span>{{ userinfo }}</span></div>
            
         <img :src="userinfo ? img : mo" alt="">
          </div>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
// //引入路由
import { useRouter, useRoute } from 'vue-router'
import { watch, reactive, ref } from 'vue'
//侧边栏图标
import a1 from '../../img/首页.png'
import a2 from '../../img/车次管理.png'
import a3 from '../../img/车站管理.png'
import a4 from '../../img/线路管理.png'
import a5 from '../../img/车票管理.png'
import a6 from '../../img/订单管理.png'
import a7 from '../../img/轨迹管理.png'
import img from '../../img/User.png'
import mo from '../../img/默认头像.png'
import dictionaries from '../../dictionaries/index.json'
import {muta} from '../../router/index'
// console.log(muta);
// console.log(muta[0].icon);
const router = useRouter()
const route = useRoute()
//获取用户名
const userinfo = localStorage.getItem('userinfo') ? localStorage.getItem('userinfo') : ''
//面包屑导航
let breadcrumb = ref([])
const routes = [
  {
    path: '/home/homes',
    title: "首页",
    icon: a1
  },
  {
    path: '/home/train',
    title: "车次管理",
    icon: a2
  },
  {
    path: '/home/station',
    title: "车站管理",
    icon: a3
  },
  {
    path: '/home/line',
    title: "线路管理",
    icon: a4
  },
  {
    path: '/home/tick',
    title: "车票管理",
    icon: a5
  },
  {
    path: '/home/order',
    title: "订单管理",
    icon: a6
  },
  {
    path: '/home/personage',
    title: "个人轨迹监控",
    icon: a7
  },
]

//监听路由
watch(() => router.currentRoute.value.path, (newValue) => {
  breadcrumb.value = route.path.slice(1).split('/')
}, { immediate: true })

//跳转路由
const Pushroute = (path) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
}

.logoImg {
  width: 119px;
  height: 30px;
  padding: 20px 10px 0 20px;
}

.icon {
  width: 23px;
  height: 22px;
  margin: 5px;
}

.el-aside {
  height: 100% !important;
}

.el-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.el-main {
  background: #EBECEE;
}

.el-breadcrumb__item {
  height: 14px;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 14px;
  color: #303849;
}

.header_right {
  display: flex;
  align-items: center;
  img{
    width: 30px;
	height: 30px;
	 border-radius: 50%;
  }
  .userInfo {
     margin-right: 10px;
     color: #80879b;
     span{
      color: #1ba9ba;
      font-size: 14px;
     }
  }
}</style>